<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/shop.css">
    <title>Title</title>
</head>
<body>
<div th:block th:include="~{common/top}"></div>


<link rel="stylesheet" href="css/shop.css">

<style>
    .display {
        width: 560px;
        overflow-y: auto;
        padding-top: 20px;
        height: auto;
    }

    table {
        width: 80%;
        position: relative;
        bottom: 40px;
        line-height: 28px;
    }

    #BackLink {
        position: relative;
        top: 655px;
        right: 40px;
        margin: 0 auto;
    }
</style>

<div class="display">
    <div id="BackLink">
        <a href="newOrderForm">
            <button><span>Return</span></button>
        </a>
    </div>

    <div id="Catalog">
        <table>
            <tr>
                <th colspan="2">Order <th:block th:text="${session.order.orderId}"></th:block>
                    <span th:text="${#dates.format(session.order.orderDate, 'yyyy/MM/dd hh:mm:ss')}"></span>
                </th>
            </tr>

            <tr>
                <th colspan="2">Billing Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="${session.order.billToFirstName}"></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${session.order.billToLastName}"></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${session.order.billAddress1}"></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${session.order.billAddress2}"></td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="${session.order.billCity}"></td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${session.order.billState}"></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="${session.order.billZip}"></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${session.order.billCountry}"></td>
            </tr>
            <tr>
                <th colspan="2">Shipping Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="${session.order.shipToFirstName}"></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${session.order.shipToLastName}"></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${session.order.shipAddress1}"></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${session.order.shipAddress2}">"</td>
            </tr>
            <tr>
                <td>City:</td>
                 <td th:text="${session.order.shipCity}"></td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${session.order.shipState}"></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="${session.order.shipZip}"></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${session.order.shipCountry}"></td>
            </tr>
        </table>

        <div id="draw-border">
            <a th:href="@{/viewOrderForm(type='insert')}" class="Button" style="position: relative;left: 160px;bottom:40px;padding: 5px">
                <button>Confirm</button>
            </a>
        </div>

    </div>
</div>


</body>
</html>